<template>
  <div>
    <el-form
      :model="query"
      inline
      label-width="100px"
      label-suffix="："
      size="small"
    >
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item label="实际开航" prop="etd">
            <el-date-picker
              v-model="query.etd"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="接单日期" prop="recDate">
            <el-date-picker
              v-model="query.recDate"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="装箱日期" prop="packTime">
            <el-date-picker
              v-model="query.packTime"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="date"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单位名称" prop="entFullname">
            <selectDown
              v-model:modelData="query.entFullname"
              selectKey="entFullname"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item label="状态" prop="status1">
            <el-select v-model="query.status1">
              <el-option :value="99" label="全部" />
              <el-option :value="0" label="未收" />
              <el-option :value="1" label="已收" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="审核状态" prop="checkStatus">
            <el-select v-model="query.checkStatus">
              <el-option :value="99" label="全部" />
              <el-option :value="0" label="未审" />
              <el-option :value="1" label="已审" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开票状态" prop="status2">
            <el-select v-model="query.status2">
              <el-option :value="99" label="全部" />
              <el-option :value="0" label="未开票" />
              <el-option :value="1" label="已开票" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <el-button type="primary" @click="search"> 搜索 </el-button>
        <el-button @click="reset"> 重置 </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import selectDown from "./selectDown.vue";
export default defineComponent({
  components: {
    selectDown,
  },
  props: {},
  emits: ["search", "reset"],
  data() {
    return {
      query: {
        etd: [],
        recDate: [],
        packTime: "",
        entFullname: "",
        status1: 99,
        checkStatus: 99,
        status2: 99,
      },
    };
  },
  methods: {
    search() {
      this.$emit("search", this.query);
    },
    reset() {
      this.query = {
        etd: [],
        recDate: [],
        packTime: "",
        entFullname: "",
        status1: 99,
        checkStatus: 99,
        status2: 99,
      };
      this.$emit("reset", this.query);
    },
  },
  mounted() {},
});
</script>

<style lang="scss" scoped>
:deep(.el-form) {
  .el-form-item {
    width: 100%;
    margin: 0;
    .el-form-item__label {
      font-size: 12px;
    }
  }
}
:deep(.el-row) {
  margin-bottom: 8px;
  padding-right: 16px;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-date-editor) {
  width: 100%;
}
</style>
